<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段标识</div>
      <div class="w-3/4">
        <a-input
          type="text"
          placeholder="用于$('')查询"
          v-model:value.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.describe" />
      </div>
    </div>

    <div class="flex items-center p-10">
      <div class="w-4/5 text-14 font-bold">标签配置</div>
      <div class="w-1/5">
        <a-button :underline="false" type="link" @click="addTab"
          >新增</a-button
        >
      </div>
    </div>

    <template v-for="(el, index) in current.items">
      <div
        class="flex items-center px-10 p-[5px] mb-[5px] border-b border-gray-200"
      >
        <div class="w-1/5 text-16">标签{{ el.tabIndex + 1 }}</div>
        <div class="w-3/5">
          <a-input type="text" v-model:value="el.name" />
        </div>
        <div class="w-1/5 text-16 ml-[10px]">
          <a-button :underline="false" type="link" @click="removeTab(index)"
            >删除</a-button
          >
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { Component } from "@/components/low-code/core/component";
import { v4 as uuidv4 } from "uuid";
import { message } from 'ant-design-vue';

export default defineComponent({
  name: "collapseSetting",
  props: ["current"],
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();

    const addTab = () => {
      component.items.push({
        key: uuidv4(),
        component: "collapseItem",
        name: "折叠标题" + (component.items.length + 1),
        tabIndex: component.items.length,
        componentProps: {},
        items: [],
      });
    };

    const removeTab = (index: number) => {
      if (component.items.length == 1) {
        message.warning("默认激活一个的标签");
        return false;
      }

      if (component.componentProps.defaultActiveKey == index) {
        message.warning("禁止删除激活一个的标签");
        return false;
      }
      component.items.splice(index, 1);
      component.componentProps.defaultActiveKey = 0;
      lowCode.updateMetaRefresh();
    };

    return { lowCode, addTab, removeTab };
  },
});
</script>

<style scoped></style>
